<template>
  <div id="app">

    <!-- 动态 class:动态设置类名 -->
    <!-- 语法:
    :class="{类名:布尔值}"动态判断是否要应用对应的类名
    :class="['类名1','类名2' ...]同时添加多个类名
     -->
   <p :class="{yellow: true}">我是一个开心的 p</p>
   <p :class="arr">我是一个开心的 p</p>


   <!-- 动态 style -->
   <!-- 语法:
   :style="{css样式:css样式值}"添加css样式 
   
   -->
   <ul>
    <li :style="{fontSize:size +'px'}">牛皮</li>
   </ul>
  </div>
</template>

<script>
export default{
  data(){
    return{
    age:18,
    arr:['yellow','red'],
    size:36
    //size:"36px"
    }
  }
}

</script>

<style>
.yellow{
  color: yellow;
}
</style>